<template name="swiperAre">
	<view class="swiperAre">
		<uniSwiperDot :info="imgList" :current="current" :mode="mode" :dots-styles="dotsStyles">
			<swiper class="swiperBox" :style="{height: height}" @change="swiperChange">
				<swiper-item v-for="(item, index) in imgList" :key="index" :style="{height: height}">
					<view class="column swiper-item">
						<block v-if="isBanner">
							<image class="image" :class="[isBorder?'borderR':'']" :src="item.banner" :style="{height: height}" @click="imgBtn(imgList,index)"/>
						</block>
						<block v-else>
							<image class="image" :src="item.url" :style="{height: height}" v-if="item.type == 'pic'" @click="imgBtn(imgList,index)"/>
							<video class="video" :src="item.url" :style="{height: height}" enable-play-gesture :autoplay="networkType=='wifi'" :muted="IsMuted" show-mute-btn controls @fullscreenchange="fullscreenchange" v-else></video>
						</block>
					</view>
				</swiper-item>
			</swiper>
		</uniSwiperDot>
   </view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		name: "swiperAre",
		props: ['imgList','height','isBanner','isBorder'],
		data(){
			return {
				dotsStyles: {
					backgroundColor: 'rgba(0, 0, 0, .3)',
					border: '1px rgba(0, 0, 0, .3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
					selectedBorder: '1px rgba(0, 0, 0, .9) solid'
				},
				current: 0,
				mode: 'default',
				IsMuted: true
			}
		},
		computed:{
			...mapState(['networkType'])
		},
		methods:{
			swiperChange(e){
				this.current = e.detail.current
			},
			imgBtn(list,index){
			    // console.log(list)
				this.$emit('imgBtn',list,index)
			},
			fullscreenchange(e){
				console.log(e);
				this.IsMuted = e.detail.fullScreen?false:true
			}
		}
	}
</script>

<style lang="scss">
	/* swiperAre */
	.swiperAre{
		@include width;
	    position: relative;
	}
	.swiperBox,.image,.video{
	    @include width;
	}
	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		@include flex-align-justify;
		color: white;
	}
</style>
